<template>
  <el-container>
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
        
       
            <el-form-item required label="团购等级" prop="level">
              <el-input v-model="form.model.level" placeholder="请输入 例如：LV4级以上"></el-input>
            </el-form-item>
            <el-form-item required label="招募人数" prop="pernum">
              <el-input v-model="form.model.pernum" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item  label="CPS">
              <el-input v-model="form.model.cps" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item required label="报酬" prop="reward">
              <el-input v-model.number="form.model.reward" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item required label="达人性别要求" prop="sex">
              <el-select
                    v-model="form.model.sex"
                    placeholder="请选择"
                  >
                    <el-option label="不限" value="不限" />
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                  </el-select>
            </el-form-item>
            <el-form-item  label="达人粉丝要求">
              <el-input v-model="form.model.fans" placeholder="请输入达人粉丝数量要求 例如：10W"></el-input>
            </el-form-item>
          
          
        
      </el-form>
      
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button  type="primary" @click="confirm"
        >确定</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import { api } from '../task.service';
  import { cloneDeep } from 'lodash';
  import {useModal, usePagination} from '@/sheep/hooks';
  

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const state = reactive({
   
  });
  // 添加 编辑 form
  let formRef = ref(null);
  const form = reactive({
    model: {
      level:null,
      pernum:null,
      cps:null,
      reward:null,
      sex:null,
      fans:null,

    },
    rules: {
      level: [{ required: true, message: '请输入团购等级', trigger: 'blur' }],
      pernum: [{ required: true, message: '请输入招募人数', trigger: 'blur' }],
      reward: [{ required: true, message: '请输入报酬', trigger: 'blur' }],
      sex: [{ required: true, message: '请选择', trigger: 'blur' }],

    },
  });

  
  async function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
        if (!valid) return;
        emit('modalCallBack', { event: 'confirm',data:form.model });
    });
  }

  async function init() {
    if(props.modal.params.type=='edit'){
      form.model=props.modal.params.data
    }
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="scss" scoped>

</style>